<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-08-19 13:07:04
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-08-19 13:07:04
 * @FilePath: \web-components-box\components\Select\Option\index.vue
 * @Description: 选项框下拉选项
-->
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
    default: '缺少选项标题'
  },
  prefixIcon: { // 前缀图标 - 插槽优先级更高
    type: String,
  },
  suffixIcon: { // 后缀图标
    type: Object,
  },
})
</script>

<template>
  <div>
    <slot v-if="$slots.prefixIcon" name="prefixIcon" />
    <div v-if="!$slots.prefixIcon && props.prefixIcon">
      <img
        width="20" height="20"
        :src="$props.prefixIcon"
        mode="scaleToFill"
      />
    </div>
    {{ props.title }}
    <img
      width="20" height="20"
      src="https://img.zcool.cn/community/01d5a75b208cbda80121bbeced28d6.gif"
      mode="scaleToFill"
    />  
  </div>
</template>